<template>
	<view id='buy-modal' class="buy-modal-wrap" :class="[showBuyModal ? 'buy-modal-show':'']">
		<view class="goods-top">
			<view class="goods-img">
				<image :src='goodsData.pic' mode='aspectFill'></image>
			</view>
			<!-- 积分商品价格 -->
			<view class="goods-inte-wrap" v-if='btnType == 3'>
				<view class="inte-icon">
					<image src='/static/inter.png'></image>
				</view>
				<text>10000</text>
			</view>
			<!-- 普通商品价格 -->
			<view class="goods-price" v-else>￥{{goodsData.price}}</view>
			<view class="close" @tap='close'>
				<uni-icons type='closeempty' size='18' color='#414141'></uni-icons>
			</view>
		</view>
		<view class="line"></view>
		<view class="goods-name">{{goodsData.goodname}}</view>
		<view class="buy-num-wrap">
			<view class="left-item">
				购买数量
			</view>
			<view class="right-item" v-if="showBuyModal == true">
				<uni-number-box :min='1' v-model="goodsData.num" @change="changeNum" />
			</view>
		</view>
		<view class="btn-wrap" v-if='btnType == 0'>
			<button class="btn line_center buy" style=" width: 100%; background: linear-gradient(82deg, #ececec 0%, #d3d3d3 100%);color: #1a1a1a;"
				v-if="goodsData.stock == 0">库存不足</button>
			<block v-else>
				<button class="btn line_center add-cart" :disabled="cartBtn.isDisabled" :loading="cartBtn.isLoading"
					@tap='addCart'>{{cartBtn.btnText}}</button>
				<button class="btn line_center buy"
					style=" background: linear-gradient(82deg, #FF7040 0%, #EC1818 100%);"
					@tap='toBuy(goodsData.g_id)'>立即购买</button>
			</block>

		</view>
		<button class="buy-btn line_center" :disabled="cartBtn.isDisabled" :loading="cartBtn.isLoading"
			v-if='btnType == 1' @tap='addCart'>{{cartBtn.btnText}}</button>
		<button class="buy-btn line_center" style="background: linear-gradient(82deg, #FF7040 0%, #EC1818 100%);"
			v-if='btnType == 2' @tap='toBuy(goodsData.g_id)'>立即购买</button>
		<!-- 微信登录弹窗 -->
		<modal :showModal="showLoginModal">
			<wx-login :showLoginModal='showLoginModal' @close='closeLoginModal'></wx-login>
		</modal>
		<!-- 购买须知 -->
		<!-- <modal :showModal='showPayModal' style="top: 0;">
			<view class="pay_about">
				购买须知
			</view>
		</modal> -->
	</view>
</template>

<script>
	const app = getApp();
	import wxLogin from '@/components/wx-login/pay-about.vue';
	import modal from '@/components/modal/modal.vue';
	export default {
		name: "buy-modal",
		components: {
			modal,
			wxLogin,
		},
		props: {
			showBuyModal: Boolean,
			goodsDetail: Object,
			btnType: {
				type: Number,
				default: 0 // 0 购物车和立即购买按钮  1 加入购物车  2 立即购买  3 立即兑换(积分)
			}
		},
		data() {
			return {
				buyNum: 1,
				goodsData: this.goodsDetail,
				showLoginModal: false,
				showPayModal: false,
				cartBtn: {
					isDisabled: false,
					isLoading: false,
					btnText: '加入购物车'
				},
				login_status: '',
				platform: app.getPlatform()
			};
		},
		mounted() {

		},
		created() {
			uni.$on('goodDetail', (data) => {
				this.goodsData = data
				console.log('goodsData', this.goodsData)
			})
		},
		watch: {
			goodsDetail: {
				immediate: true,
				handler(newV) {
					this.goodsData = newV;
					console.log('goodsData', this.goodsData)
				},
			},
		},
		methods: {
			/* 加入购物车 */
			addCart: app.throttle(function() {
				var that = this,
					goodsData = that.goodsData;
				app.globalRequest({
					api: app.getApi().cartApi.saveCart,
					data: {
						g_id: goodsData.g_id,
						type: '1',
						num: that.buyNum,
					},
					method: 'post',
				}).then(res => {
					console.log('res 购物车', res)
					switch (Number(res.code)) {
						case 1:
							uni.showToast({
								title: '加入购物车成功',
								icon: 'success',
								mask: true
							})
							that.close();
							that.buyNum = 1
							break;
						case 419:
							// that.showLoginModal = true;
							uni.showToast({
								title: '请授权登录',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/user/login/login_auth',
								})
							}, 1000)
							break;
						default:
							uni.showToast({
								title: res.msg,
								icon: 'none',
								mask: true
							});

					}
				}).catch(err => {

				})
			}, 300),
			toBuy(good_id) {
				console.log(good_id)
				let that = this
				// 获取登录状态
				app.globalRequest({
					api: app.getApi().public.islogin,
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						that.login_status = res.data.is_not_login
						if (that.login_status == 1) {
							uni.showToast({
								title: '请授权登录',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/user/login/login_auth',
								})
							}, 1000)
							return
						} else {
							uni.navigateTo({
								url:`/pages/goods-page/submit-order/submit-order?good_id=${good_id}&type=1&num=${that.buyNum}`
							})
						}
					}else if(res.code == 419){
						uni.showToast({
							title: '请授权登录',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/login/login_auth',
							})
						}, 1000)
					}
				}).catch(err => {

				})

			},
			changeNum(obj) {
				this.buyNum = obj.inputValue;
			},
			closeLoginModal() {
				this.showLoginModal = false
				this.buyNum = 1
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.buy-modal-wrap {
		width: 100%;
		min-height: 620rpx;
		/* padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); */
		box-sizing: content-box;
		background: $dis-con-color;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}

	.buy-modal-show {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.goods-top {
		padding: 44rpx 24rpx;
		display: flex;
	}

	.goods-img {
		width: 112rpx;
		height: 112rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.goods-price {
		margin-left: 48rpx;
		font-size: 44rpx;
		font-weight: bold;
		flex: 1;
	}

	.goods-inte-wrap {
		margin-left: 18rpx;
		display: flex;
		font-size: 50rpx;
		color: $dis-inter-color;
		flex: 1;

		.inte-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 16rpx;
		}
	}

	.line {
		width: 750rpx;
		height: 6rpx;
		background: $dis-bg-color;
	}

	.goods-name {
		margin: 26rpx 24rpx 0;
	}

	.buy-num-wrap {
		margin: 24rpx 24rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.buy-btn {
		width: 686rpx;
		height: 84rpx;
		background: $dis-liner-color;
		border-radius: 42rpx;
		margin: 118rpx auto 0;
		font-size: 30rpx;
		color: $dis-con-color;
	}

	.btn-wrap {
		margin: 118rpx 24rpx 0;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 320rpx;
			height: 84rpx;
			border-radius: 42rpx;
			color: #fff;
			font-size: 30rpx;
			border: none;
		}

		.add-cart {
			background: linear-gradient(100deg, #FF8E12 0%, #FFC65E 100%);
		}

		.buy {
			background: $dis-liner-color;
		}

	}

	.pay_about {
		width: 80%;
		height: 600rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}
</style>